import Taro, {Component} from '@tarojs/taro'
import {Picker, View, ScrollView} from '@tarojs/components'
import { AtCard, AtMessage } from 'taro-ui'
import moment from 'moment';
import {getUserBankCardInfo} from './service'
import './index.scss'
import { connect } from '@tarojs/redux'
import {setRefresh} from "../../actions/refresh";


@connect(({ refresh }) => ({
  refresh
}), (dispatch) => ({
  setRefresh (isRefresh) {
    dispatch(setRefresh(isRefresh))
  },
}))
export default class attendance extends Component {

  config = {
    navigationBarTitleText: '工资卡',
  };

  constructor(props) {
    super(props);
    this.state = {
      scrollHeight: 0,
      dataList: [],
      date: moment(new Date()).format('YYYY-MM'),
      id: null,
      isOpen: false,
      bpmModalVisible: false,
      range: null
    }
  }

  componentDidMount() {
    Taro.getSystemInfo().then(res => {
      this.setState({scrollHeight: res.windowHeight})
    });
    this.initList();
  }

  componentDidShow () {
    if (this.props.refresh.flag){
      this.initList();
      this.props.setRefresh(false)
    }
  }

  initList() {
    getUserBankCardInfo().then(res => {
      this.setState({dataList: [res.data]});
    })
  }

  onTimeChange(e) {
    this.setState({date: e.detail.value});
    this.initList(e.detail.value);
  }

  turnToUpdate = (item) => {
    const {name,bankAccount, bankcardNum, effectiveDate, id, isPaycard, oid, subBranch} = item;
    let url = '/pages/salaryCard/edit/index';
    if (item){
      url += '?data='+JSON.stringify({name,bankAccount, bankcardNum, effectiveDate, id, isPaycard, oid, subBranch});
    }
    Taro.navigateTo({ url })
  };

  render() {
    return (
      <View>
        <AtMessage />
        <ScrollView
          style={'height: '+this.state.scrollHeight+'px; padding: 0'}
          className='scrollView'
          scrollY
          scrollWithAnimation
        >
          {
            this.state.dataList &&
            this.state.dataList.map((item, index) => (
              <View className='card' key={index} style='margin: 15pt 0'>
                <AtCard
                  title={item.bankAccount} >
                  <View className='card-content'>
                    <View className='contentItem'>
                      <View>持卡人姓名:</View>
                      <View>{item.name}</View>
                    </View>
                    <View className='contentItem'>
                      <View>开户银行:</View>
                      <View>{item.bankAccount}</View>
                    </View>
                    <View className='contentItem'>
                      <View>支行:</View>
                      <View>{item.subBranch}</View>
                    </View>
                    <View className='contentItem'>
                      <View>卡号:</View>
                      <View>{item.bankcardNum}</View>
                    </View>
                    <View className='contentItem'>
                      <View>生效时间:</View>
                      <View>{item.effectiveDate && moment(item.effectiveDate).format('YYYY-MM-DD')}</View>
                    </View>
                  </View>
                  <View className='card-btnBar'>
                    <View className='btn' onClick={() => this.turnToUpdate(item)}>修改</View>
                  </View>
                </AtCard>
              </View>
            ))
          }
        </ScrollView>
      </View>
    )
  }
}
